<template>
    <div class="login">
        <div class="logo">
            <img src="../assets/img01.png"/>
        </div>
            <InputGroup type="text"  v-model="name" placeholder="用户名" :error="errors.code" class="co" />
            <InputGroup type="text"  v-model="password" placeholder="密码" :error="errors.code" class="co"/>
            <InputGroup
                type="number"
                v-model="phone"
                placeholder="手机号"
                :btnTitle="btnTitle"
                :disabled="disabled"
                :error="errors.phone"
                @btnClick="getVerifyCode"
                class="co"
            />
            <!-- 验证码 -->
            <InputGroup type="number" v-model="verifyCode" placeholder="验证码" :error="errors.code" class="co"/>

            <!-- 用户服务协议 -->
            <div class="login_des">
                <p>
                     新用户注册，表示已同意
                    <span>《用户服务协议》</span>
                </p>
            </div>
            <!-- 登录按钮 -->
            <div class="login_btn">
            <button>登录</button>
        </div>
          <div class="a">
                <a href="#" @click.prevent="goLogin">返回</a>
           </div>
    </div>
</template>

<script>
import InputGroup from '../components/InputGroup'
export default {
  name: 'login',
  data () {
    return {
      name: '',
      password: '',
      phone: '',
      verifyCode: '',
      errors: {},
      btnTitle: '获取验证码',
      disabled: false
    }
  },
  methods: {
    getVerifyCode () {
      if (this.validatePhone()) {
        this.validateBtn()
      }
    },
    validateBtn () {
      let time = 60
      const timer = setInterval(() => {
        if (time === 0) {
          clearInterval(timer)
          this.btnTitle = '获取验证码'
          this.disabled = false
        } else {
          // 倒计时
          this.btnTitle = time + '秒后重试'
          this.disabled = true
          time--
        }
      }, 1000)
    },
    validatePhone () {
      // 验证手机号码
      if (!this.phone) {
        this.errors = {
          phone: '手机号码不能为空'
        }
        return false
      } else if (!/^1[345678]\d{9}$/.test(this.phone)) {
        this.errors = {
          phone: '请填写正确的手机号码'
        }
        return false
      } else {
        this.errors = {}
        return true
      }
    },
    goLogin () {
      this.$router.push('/login')
    }
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    InputGroup
  }
}
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
  background: #fff;
}
.login{
     text-align: center;
}
.logo img{
    width: 220px;
    height: 120px;
}
.co{
    margin-top: 15px;
}
.text_group,
.login_des,
.login_btn {
  margin-top: 20px;
}
.login_des {
  color: #aaa;
  line-height: 22px;
}
.login_des span {
  color: #4d90fe;
}
.login_btn button {
  width: 100%;
  height: 40px;
  background-color: #81a0dad0;
  border-radius: 4px;
  color: white;
  font-size: 14px;
  border: none;
  outline: none;
}
.login_btn button[disabled] {
  background-color: #81a0dad0;
}
.a{
    margin-top: 20px;
}
.a a{
    text-decoration: none;
}
</style>
